<template>
  <view class="package ">
    <view class="space-between datas">
      <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
        @change="change" />
      <view @click="popupOpen()">筛选</view>
    </view>
    <view v-if="amount_name" class="wearn" @click="del()">
      <text>{{amount_name}}</text>
      <uni-icons type="closeempty" color="#666" size="20" style="margin-left: 10rpx"></uni-icons>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package" style="margin-top:0px;" v-if="wareAll.length>0">
      <view class="space-between detail" v-for="item in wareAll" :key="item.id">
        <view>
          <view>{{item.memo}}</view>
          <view style="font-size: 26rpx;margin-top:10rpx;">{{item.createtime}}</view>
        </view>
        <view>{{item.money}}公斤</view>
      </view>
    </view>
    <Popu v-else :pageHeight="pageHeight" text="暂无账户变动明细"></Popu>
  </scroll-view>
  <!-- 地区筛选 -->
  <uni-popup ref="popup" type="center" :is-mask-click="false">
    <view class="package" style="width: 670rpx;">
      <view v-if="userInfo.physical.length>0" class="flexCenter">
        <view v-for="item in userInfo.physical" :key="item.id"
          :style="{background:amount_id==item.id?'#1D8DFF':'',color:amount_id==item.id?'#fff':''}"
          @click="district(item.id,item.region_name)">
          {{item.region_name}}
        </view>
      </view>
      <Popu v-else pageHeight="10vh" text="暂无账户变动明细"></Popu>
      <view class="space-between text">
        <text @click="cancel()">取消</text>
        <text @click="submit()">确定</text>
      </view>
    </view>
  </uni-popup>
</template>
<script setup lang="ts">
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import { format, subDays } from 'date-fns';
  import { getAmountRegionLog, getAmountLog } from '@/gql/warehouse';
  import { onLoad } from '@dcloudio/uni-app';
  import { showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  const driver_id = ref();
  const amount_id = ref()
  const amount_name = ref()
  let now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  let daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);
  const pageHeight = ref();
  const wareAll = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const popup = ref(null)
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 160;
    },
  });
  onLoad((pearm) => {
    driver_id.value = Number(pearm.driver_id)
    userInfo.inventory(driver_id.value);
    userInfo.Physicalamounte(driver_id.value);
    if (pearm.id) {
      amount_id.value = Number(pearm.id)
      amount_name.value = pearm.name
      wareList()
    } else {
      wareInfor()
    }
  })
  /**
   * 获取仓库信息
   * @param {Number} page  获取仓库列表数据
   * @param {String} keywords  搜索信息
   */
  function wareList() {
    showLoading()
    const payload = {
      query: getAmountRegionLog,
      variables: {
        page: currentPage.value,
        driver_id: driver_id.value,
        start,
        end,
        amount_id: amount_id.value
      },
    };
    toPublish(
      'ql/driver/getAmountRegionLog',
      payload,
      (obj : any) => {
        const { getAmountRegionLog } = obj.data;
        wareAll.value = [...wareAll.value, ...getAmountRegionLog.list];
        lastPage.value = getAmountRegionLog.lastpage;
      }
    );
  }
  function wareInfor() {
    showLoading()
    const payload = {
      query: getAmountLog,
      variables: {
        page: currentPage.value,
        driver_id: driver_id.value
      },
    };
    toPublish(
      'ql/driver/getAmountLog',
      payload,
      (obj : any) => {
        const { getAmountLog } = obj.data;
        wareAll.value = [...wareAll.value, ...getAmountLog.list];
        lastPage.value = getAmountLog.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      if (amount_id.value) {
        wareList();
      } else {
        wareInfor()
      }
    }
  }
  /**
    * 时间筛选
    * @param sta  开始时间
    * @param en  结束时间
    */
  function change([sta, en]) {
    start = sta;
    end = en;
    wareAll.value = []
    currentPage.value = 1
    wareList();
  }
  function popupOpen() {
    popup.value.open()
  }
  function district(id : number, name : string) {
    amount_id.value = id
    amount_name.value = name
  }
  function del() {
    amount_id.value = ''
    amount_name.value = ''
    wareAll.value = []
    currentPage.value = 1
    wareInfor();
  }
  function cancel() {
    popup.value.close()
    del()
  }
  function submit() {
    popup.value.close()
    wareAll.value = []
    currentPage.value = 1
    wareList();
  }
</script>

<style scoped lang="less">
  .flexCenter {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    view {
      padding: 8rpx 20rpx 9rpx;
      box-sizing: border-box;
      border: 1px solid #1D8DFF;
      border-radius: 10rpx;
      text-align: center;
      min-width: 150rpx;
    }
  }

  .text {
    width: 80%;
    margin: 25rpx auto 15rpx;

    text {
      width: 222rpx;
      height: 71rpx;
      border-radius: 10rpx;
      text-align: center;
      line-height: 71rpx;
    }

    text:nth-of-type(1) {
      border: 1px solid #1D8DFF;
      color: #1D8DFF;
      box-sizing: border-box;
    }

    text:nth-of-type(2) {
      background: #1D8DFF;
      color: #fff;
    }


  }

  .wearn {
    width: 200rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 30px;
  }
  .detail {
    padding: 10rpx 0px;
    box-sizing: border-box;
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>